import styled from 'styled-components'
import error from '@/static/images/set/error.png'
import right from '@/static/images/set/right.png'
import weak from '@/static/images/set/weak.png'
import mid from '@/static/images/set/mid.png'
import strong from '@/static/images/set/strong.png'
const StyledPIN = styled.div`
	&.pin-wrap {
		input[type='password']::-ms-reveal,
		input[type='password']::-ms-clear {
			display: none;
		}
		font-size: 12px !important;
		.form {
			padding-left: 0px;
		}
		.newPIN-item-wrap {
			position: relative;
			.help-wrap {
				position: relative;
				top: -2px;
				.help-btn {
					padding-left: 10px;
					color: #3e9bd0;
					text-decoration: underline;
					display: inline-block;
					position: relative;
					top: 2px;
					cursor: pointer;
				}
				.help-info {
					left: 10px;
					top: 26px;
					position: absolute;
				}
			}
		}
		.bottom-tip {
			position: absolute;
			top: 22px;
			left: 0px;
		}
		.warn-text {
			color: rgb(210, 30, 30);
			font-size: 12px;
		}
		.check-wrap {
			font-size: 12px;
			padding: 0;
			margin: 0;
			margin-left: 8px;
			height: 25px;
			display: flex;
			align-items: center;
			.check-icon {
				display: inline-block;
				width: 16px;
				height: 16px;
			}
			.check-text {
				margin-left: 4px;
				font-size: 12px;
			}
			&.right {
				.check-icon {
					background: url(${right});
				}
				.check-text {
					color: #3d9353;
				}
			}
			&.error {
				.check-icon {
					background: url(${error});
				}
				.check-text {
					color: #d21e1e;
				}
			}
			&.weak {
				.check-icon {
					background: url(${weak});
				}
				.check-text {
					color: #d21e1e;
				}
			}
			&.mid {
				.check-icon {
					background: url(${mid});
				}
				.check-text {
					color: #ffa500;
				}
			}
			&.strong {
				.check-icon {
					background: url(${strong});
				}
				.check-text {
					color: #3d9353;
				}
			}
		}
	}
`
const PopUpStyled = styled.div`
	position: absolute;
	width: 200px;
	// height: 100px;
	// line-height: 100px;
	// text-align: center;
	// box-shadow: 0px 0px 8px 5px #00000014;
	background: #ffffff;
	margin-top: 8px;
	&:before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		border: 5px solid;
		border-color: transparent transparent #ffffff transparent;
	}
`
export { StyledPIN, PopUpStyled }
